/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react'
import {
  Button,
  Intent,
  Colors,
  Icon,
  Classes,
  Tabs,
  Tab
} from '@blueprintjs/core'

const ConnectionTabs = (props) => {
  const {
    connections = [],
    errors = [],
    selectedTabId,
    onChange = () => {}
  } = props

  return (
    <>
      <Tabs
        className='connection-tabs'
        animate={false}
        vertical={true}
        id='connection-tabs'
        onChange={(tabId) => onChange(tabId)}
        selectedTabId={selectedTabId}
      >
        {connections.map((c, cIdx) => (
          <Tab
            key={`tab-key-${cIdx}`}
            id={`connection-${c.id}`}
            title={
              errors.some((e) => e.includes(c.name)) ? (
                <>
                  {c.title}{' '}
                  <span
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      alignSelf: 'center',
                      marginLeft: '10px'
                    }}
                  >
                    <Icon icon='warning-sign' size={10} color={Colors.GRAY4} />
                  </span>
                </>
              ) : (
                c.title
              )
            }
            connection={c}
            // disabled=
          />
        ))}
      </Tabs>
    </>
  )
}

export default ConnectionTabs
